<template>
  <div class="home" :style="{ paddingTop: commonStore.safeTopArea.statusBarHeight + 'px' }">
    <div
      class="px-15px"
      :style="{
        height: (commonStore.safeTopArea.menuBtnHeight || 40) + 'px',
        'line-height': (commonStore.safeTopArea.menuBtnHeight || 40) + 'px',
      }"
    >
      <span class="border-b-solid border-b-red border-b-4">遇见</span>
    </div>
    <div class="list" @click="goDetail">
      <template v-for="item in list" :key="item.id">
        <div class="list-item border h-180px relative">
          <image src="@/static/images/pic.jpg" class="list-item__img w-full h-full" mode="" />

          <div class="absolute top-0 left-0 w-50px py-1px bg-pink list-item__tag">已认证</div>
          <div class="absolute bottom-1 left-1 p-1px flex">
            <div class="bg-blue border-rd-2 p-2px">
              {{ item.name }}
            </div>
            <div class="bg-blue ml-5px border-rd-2 p-2px">视频</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
import { getSafeTopArea } from '@/utils/native'
import { useCommonStore } from '@/store'
const commonStore = useCommonStore()

const list = ref([
  { id: 1, name: '1' },
  { id: 2, name: '2' },
  { id: 3, name: '3' },
  { id: 4, name: '4' },
  { id: 5, name: '5' },
  { id: 6, name: '6' },
  { id: 7, name: '7' },
  { id: 8, name: '8' },
  { id: 9, name: '9' },
])

const goDetail = () => {
  uni.navigateTo({
    url: '/pages/tabBar/home/onebyone',
  })
}

onLoad((options) => {
  console.log(options)
})

onMounted(async () => {})

onPullDownRefresh(() => {
  console.log('下拉刷新')
  uni.showLoading({
    title: '数据更新中...',
  })
  setTimeout(() => {
    list.value = [
      { id: 1, name: '1' },
      { id: 2, name: '2' },
      { id: 3, name: '3' },
      { id: 4, name: '4' },
      { id: 5, name: '5' },
      { id: 6, name: '6' },
      { id: 7, name: '7' },
      { id: 8, name: '8' },
    ]
    uni.hideLoading()
    uni.stopPullDownRefresh()
  }, 2000)
})

onReachBottom(() => {
  console.log('触底')
  uni.showLoading({
    title: '更多加载中',
  })
  setTimeout(() => {
    list.value.push(
      ...[
        {
          id: Math.random(),
          name: Math.random().toString(36).substr(2),
        },
        {
          id: Math.random(),
          name: Math.random().toString(36).substr(2),
        },
        {
          id: Math.random(),
          name: Math.random().toString(36).substr(2),
        },
        {
          id: Math.random(),
          name: Math.random().toString(36).substr(2),
        },
      ],
    )
    uni.hideLoading()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.home {
  .list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 10px;
    justify-content: space-between;
    padding: 15px;

    &-item {
      border-radius: 10px;

      &__img {
        border-radius: 10px;
      }

      &__tag {
        font-size: 12px;
        text-align: center;
        border-radius: 10px 0;
      }
    }
  }
}
</style>
